<html>
<head>
<meta NAME="author" CONTENT="Peter Csizmadia">
    <script type="text/javascript" src="../../sh_main.js"></script>
    <script type="text/javascript" src="../../sh_javascript.js"></script>
    <script type="text/javascript" src="../../sh_html.js"></script>
    <link REL ="stylesheet" TYPE="text/css" HREF="../../sh_nedit.css" TITLE="Style">
<link REL ="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">
<title>MarvinSketch Example - Embedding MarvinSketch applet in HTML pages</title>
</head>
<body onload="sh_highlightDocument();">

<h1>MarvinSketch Example - Embedding MarvinSketch applet in HTML pages</h1>

This section covers the basic ways of creating Marvin Applets and embedding them in
HTML pages.

<h4><a class="anchor" name="marvinjs">Simple embedding</a></h4>

<p>To support the use of Marvin Applets, ChemAxon provides utility functions that help to
overcome the problems of working with HTML tags. These utilities are stored in the
<a href="../marvin.js.txt">marvin.js</a> JavaSript file.<br>
The live MarvinSketch applet embedded in the HTML page appears as follows:
</p>

<center>
<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
msketch_begin("../../..", 540, 480);
msketch_end();
//-->
</script>
</center>

<p>To achieve this the following lines should be included in the HTML page:</p>
<blockquote>
<pre class="sh_html">
&lt;script LANGUAGE=&quot;JavaScript1.1&quot; SRC=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;&gt;&lt;/script&gt;
&lt;script LANGUAGE=&quot;JavaScript1.1&quot;&gt;
&lt;!--
</pre><pre class="sh_javascript">
msketch_begin(&quot;../../..&quot;, 540, 480); <em>// arguments: codebase, width, height</em>
msketch_end();
</pre><pre class="sh_html">
//--&gt;
&lt;/script&gt;
</pre>
</blockquote>

<h4>Technical background</h4>
<p>
Sun recommends to include applets in HTML pages by using the APPLET tag:
<blockquote>
<pre class="sh_html">
&lt;applet CODEBASE="../../.." ARCHIVE=&quot;appletlaunch.jar&quot;
        CODE=&quot;JMSketchLaunch&quot; WIDTH=540 HEIGHT=480&gt;
&lt;strong&gt;Your browser does not support the applet tag.&lt;/strong&gt;
&lt;/applet&gt;
</pre>
</blockquote>
The <code><strong>CODEBASE</strong></code> option specifies the directory of
the Marvin binaries relative to the HTML file. This HTML file is in a
subdirectory of the Marvin binaries directory, that's why we use
"<code>../../..</code>" here.<br>
The <code><strong>ARCHIVE</strong></code> option is used to preload resources
that can significantly improve the performance of applets.<br>
For more information, please see the <a href="#resources">About resources</a> section.<br>
The CODE attribute specifies the name of the applet class.
The text &quot;<strong>Your browser does not support the applet tag.</strong>&quot; is
displayed if someone visits the web page with a browser that is not Java
compatible.

<p>However there is a note in
    <a href="http://java.sun.com/docs/books/tutorial/deployment/applet/applettag.html">The Java Tutorials</a>,
    that makes the situation more complicated:</p>
<blockquote>
    <hr>
Note: The HTML specification states that the applet tag is deprecated, and that
    you should use the object tag instead. However, the specification is vague
    about how browsers should implement the object tag to support Java applets,
    and browser support is currently inconsistent. It is therefore recommended
    that you continue to use the applet tag as a consistent way to deploy Java
    applets across browsers on all platforms.
    <hr>
</blockquote>

<p>There are three possible platform dependent solutions available overall:</p>
<ol>
<li><pre class="sh_html">&lt;applet ARCHIVE=&quot;appletlaunch.jar&quot;&gt;</pre></li>
<li><pre class="sh_html">&lt;embed&gt;</pre></li>
<li><pre class="sh_html">&lt;object&gt;</pre></li>
</ol>
<p>The <code>embed</code> tag is used to deploy applets that are to be used only
with the Mozilla family of browsers (including FireFox), the <code>object</code>
tag with Internet Explorer, while the <code>applet</code> tag is general.
However with the <code>applet</code> tag, the required Java Plug-in cannot be automatically
downloaded and installed while it can with the two other solutions.<br>
The most reliable way among these is to use the <code>applet</code> tag as Sun recommends.</p>

<h4><a name="resources" class="anchor">About resources</a></h4>
<p>
Before version 5.2.1 the <code>jmarvin.jar</code> compressed JAR file was used as applet resource.
The <code>appletlaunch.jar</code> file contains a wrapper to the binaries stored in <code>jmarvin.jar</code>.
It performs loading of the applet resources in the background while displaying a splash screen.</p>
<p>
It is also possible to use <code>jmarvin.jar</code> directly. This usage is sometimes referred to as
old behavior.</p>

In this case the applet creation is as follows:
<blockquote>
<pre class="sh_html">
&lt;script LANGUAGE=&quot;JavaScript1.1&quot; SRC=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;&gt;&lt;/script&gt;
&lt;script LANGUAGE=&quot;JavaScript1.1&quot;&gt;
&lt;!--
</pre><pre class="sh_javascript">
msketch_begin(&quot;../../..&quot;, 540, 480, true); <em>// arguments: codebase, width, height, true means the old behavior </em>
msketch_end();
</pre><pre class="sh_html">
//--&gt;
&lt;/script&gt;
</pre>
</blockquote>

The same behavior with the <code>&lt;applet&gt;</code> tag:
<blockquote>
<pre class="sh_html">
&lt;applet CODEBASE="../../.." ARCHIVE=&quot;jmarvin.jar&quot;
        CODE=&quot;JMSketch&quot; WIDTH=540 HEIGHT=480&gt;
&lt;strong&gt;Your browser does not support the applet tag.&lt;/strong&gt;
&lt;/applet&gt;
</pre>
</blockquote>

<h4><a name="refer" class="anchor">Reference to the applet</a></h4>
<p>If you would like to refer the applet, you should add a name for it. You can use the <strong>ID</strong> or <strong>NAME</strong>
attribute to do this. The name has to be unique. There can not be any other object on the same page with the same identifier.
If you specify the <strong>NAME</strong> attribute, you can refer to the applet as a field of the <strong>document</strong> object.
For example, if the value of the name attribute is <strong>MSketch</strong>, you can refer to the titled object as <strong>document.MSketch</strong>.
If you prefer the <strong>ID</strong> attribute, you can refer to the object by the <strong>getElementById()</strong> method. For example, if the value
of the ID attribute is <strong>MSketch</strong>, you can refer to the object like <strong>document.getElementById("MSketch")</strong>.
<blockquote>
<pre class="sh_html">
&lt;applet CODEBASE="../../.." ARCHIVE=&quot;jmarvin.jar&quot; id=&quot;MSketch&quot;
        CODE=&quot;JMSketch&quot; WIDTH=540 HEIGHT=480&gt;
&lt;strong&gt;Your browser does not support the applet tag.&lt;/strong&gt;
&lt;/applet&gt;

&lt;script LANGUAGE=&quot;JavaScript1.1&quot;&gt;
&lt;!--
</pre><pre class="sh_javascript">
function doSomething() {
	applet = document.getElementById(&quot;MSketch&quot;);
	if(applet != null) {
		alert(applet.getMoL(&quot;smiles&quot;));
	}
}
</pre><pre class="sh_html">
//--&gt;
&lt;/script&gt;
</pre>
</blockquote>

It sounds very complicated. If you use the <strong>marvin.js</strong> to generate applet code, you can specify applet name by defining <strong>msketch_name</strong>
(for MarvinSketch), <strong>mview_name</strong> (for MarvinView) or <strong>mspace_view</strong> (for MarvinSpace) variable to title the proper applet.
For example:
<blockquote>
<pre class="sh_html">
&lt;script LANGUAGE=&quot;JavaScript1.1&quot; SRC=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;&gt;&lt;/script&gt;
&lt;script LANGUAGE=&quot;JavaScript1.1&quot;&gt;
&lt;!--
</pre><pre class="sh_javascript">
msketch_name=&quot;MSketch&quot;;
msketch_begin(&quot;../../..&quot;, 540, 480, true); <em>// arguments: codebase, width, height, true means the old behavior </em>
msketch_end();
</pre><pre class="sh_html">
//--&gt;
&lt;/script&gt;
</pre>
</blockquote>
After then, you can refer to this applet by both both ways (<em>document.MSketch</em> or <em>document.getElementById("MSketch")</em>).<br>
If you do not use unique name, <em>document.MSketch</em> will return with an array, not with an applet instance. So the document.MSketch.getMol("smiles") statement
can throw exception because of the wrong casting.</p>

<p>
<center><div class="lenia">&nbsp;</div></center>
<p>The
<a HREF="colors.html">next example</a> introduces the use of applet parameters.

</body>
</html>
